<template>
  <span>
    <el-table-column :prop="item.key || ''" :min-width="getcolumnWidth(item)" align="center" :key="index"
                     v-for="(item, index) in firstThead" :label="item.value">
      <elTableColumnHead v-if="othersThead.length > 0" :thead="othersThead"></elTableColumnHead>
    </el-table-column>
  </span>
</template>
<script>
export default {
  name: 'elTableColumnHead',
  props: {
    thead: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    firstThead() {
      if (Array.isArray(this.thead) && this.thead.length > 0) {
        return this.thead[0]
      }
      return []
    },
    othersThead() {
      if (Array.isArray(this.thead)) {
        return this.thead.filter((v, i) => i !== 0)
      }
      return []
    }
  },
  methods: {
    getcolumnWidth(item) {
      if (item && item.columnWidth) {
        return item.columnWidth
      }
      return 120
    }
  }
}
</script>
